<body>
  <!-- 初始化设定 -->
  <!-- <input type="text" id="my-input" value="foo" /> -->
  <!-- 对于这种不合法，浏览器校验为不合法，修改成默认值：text -->
  <input type="foo" />
</body>
<script>
  //   1、属性更改
  //   const el = document.querySelector('#my-input')
  //   el.value = 'bar'
  //   console.dir(el.value) //'bar',这是新值
  //   console.log(el.getAttribute('value')) //'foo'，原始值
  //   console.dir(el.defaultValue) //'foo'原始值

  //   2、浏览器处理合法值
  console.log(document.querySelector('input').type) //text

  //   结论：
  //  在编译之前 Attributes是HTML元素的原始属性，DOMProperties是元素的当前属性值，可能已被修改。
  // 但是可以在虚拟dom里面用js修改的方式绑定属性，比如 disabled
</script>
